<template>
  <div id="app">
    <div class="header">
      <img src="../static/logo.png" alt="">
      <img class="head-im" src="../static/xiao.png" alt="">
    </div>
    <div class="nav">
      <router-link to="/shou">首页</router-link>
      <router-link to="/nan">男生</router-link>
      <router-link to="/nv">女生</router-link>
      <router-link to="/shu">书架</router-link>
      <router-link to="/chong">充值</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
  /*通用样式*/
  *{
      padding: 0;
      margin: 0;
      font-family: "微软雅黑";
      font-size: 15px;
      list-style: none;
      box-sizing: border-box;
  }
  body{
    background: #EEEEEE;
  }
  #app{
    width:100%;
    .header{
      width:100%;
      height:50px;
      background: #E98110;
      padding:10px 15px;
      display: flex;
      justify-content: space-between;
      .head-im{
        margin-top: 5px;
        width:20px;
        height:20px;
      }
    }
    .nav{
      width: 100%;
      height:50px;
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #E98110;
      a{
        display: block;
        width:18%;
        height:50px;
        text-align: center;
        line-height: 50px;
        color:rgb(17, 17, 16);
        text-decoration: none;
        font-size: 17px;
      }
      .router-link-exact-active{
        color:#E98110;
      }
    }
  }
</style>
